<template>
    <div class="app-container">
        <el-row
            :gutter="10"
            class="mb8 clearfix "
            style="margin-top:2px;"
        >
            <el-col :span="18">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    v-show="showSearch"
                    :inline="true"
                >
                    <el-form-item
                        label="机构名称"
                        prop="keyword"
                    >
                        <el-input
                            v-model="queryParams.agencyName"
                            placeholder="请输入机构名称"
                            clearable
                            size="small"
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                        >搜索</el-button>
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                        >重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col
                :span="1.5"
                style="float:right;margin:8px 5px 0px 0px;"
            >
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="small"
                    @click="handleAdd"
                >新增机构</el-button>
            </el-col>
        </el-row>

        <div
            class="table"
            style="height:100%;background:white;padding:20px"
        >
            <el-table
                v-loading="loading"
                :data="AgencyList"
                @selection-change="handleSelectionChange"
                :header-cell-style="table_style"
            >
                <el-table-column
                    type="selection"
                    width="80"
                    align="center"
                />
                <el-table-column
                    label="序号"
                    type="index"
                    width="120"
                    sortable
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="机构名称"
                    prop="agencyName"
                    align="center"
                    :show-overflow-tooltip="true"
                  
                />
                <el-table-column
                    label="统一社会信用代码"
                    prop="agencyCode"
                    :show-overflow-tooltip="true"
                    width="250"
                     align="center"
                />
                <el-table-column label="机构类型" prop="agencyType" width="100"  align="center" :formatter="typeFormat" />
                <el-table-column
                    label="机构管理员"
                    prop="agencyUser"
                    :show-overflow-tooltip="true"
                    width="150"
                     align="center"
                />
                <el-table-column
                    label="联系电话"
                    prop="telephone"
                    :show-overflow-tooltip="true"
                    width="150"
                     align="center"
                />  
                <!-- <el-table-column
                    label="创建时间"
                    prop="createTime"
                    width="180"
                     align="center"
                >
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column> -->
                
                <el-table-column
                    label="操作"
                    align="center"
                    width="200"
                    class-name="small-padding"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                        >修改</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                           
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="clearfix">
                <el-button
                    class="delete"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                >删除</el-button>
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-row>
        </div>
        <!-- 添加或修改机构配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            :close-on-click-modal="false"
            append-to-body
            custom-class="addAgency"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-divider content-position="left" :style="{'margin-bottom':'18px'}"><strong>机构信息</strong></el-divider>
                <div class="agencyInfo">
                    <el-form-item
                        label="机构编号"
                        prop="agencyId"
                        v-show="false"
                    >
                    <el-input v-model="form.agencyId" />
                    </el-form-item>
                    <el-form-item label="机构类型" prop="agencyType">
                            <el-radio-group v-model="form.agencyType" :disabled ="Boolean(form.agencyId)">
                                <el-radio label='1' >组织机构</el-radio>
                                <el-radio label='0' >个体机构</el-radio>
                            </el-radio-group>
                    </el-form-item>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                    label="机构名称"
                                    prop="agencyName"
                                    
                                >
                                    <el-input
                                        :disabled="Boolean(form.agencyId)"
                                        v-model="form.agencyName"
                                        placeholder="请输入机构名称"
                                    />
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                            label="统一社会信用代码"
                            prop="agencyCode"
                            style="margin-left:20px;"
                            label-width="205px"
                        >
                            <el-input
                                :disabled="form.agencyType=='0'"
                                v-model="form.agencyCode"
                                placeholder="请输入机构统一社会信用代码"
                            />
                    </el-form-item>
                    </el-col>
                    </el-row>    
                    <el-form-item
                            label="机构全称"
                            prop="agencyAllName"       
                        >
                            <el-input
                                :disabled="form.agencyType=='0'"
                                v-model="form.agencyAllName"
                                placeholder="请输入机构全称"
                            />
                    </el-form-item>
                    <el-form-item
                            label="机构简述"
                            prop="description"
                        >
                            <el-input
                                :disabled="form.agencyType=='0'"
                                v-model="form.description"
                                placeholder="请输入机构名称"
                            />
                    </el-form-item>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="最大用户数"
                                prop="maxUserNumber"
                            >
                                <el-input
                                    :disabled="form.agencyType=='0'"
                                    v-model="form.maxUserNumber"
                                    placeholder=""
                                />
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="14">
                            <el-form-item
                                label="最大在线人数"
                                prop="conuserNumber"
                            style="margin-left:20px;">
                                <el-input
                                    :disabled="form.agencyType=='0'"
                                    v-model="form.conuserNumber"
                                    placeholder=""
                                />
                            </el-form-item>    
                        </el-col>
                    </el-row>
                </div>
                <el-divider content-position="left"><strong>机构管理员信息</strong></el-divider>
                <div class="agencyUserInfo">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="机构管理员"
                                prop="agencyUser"
                            >
                                <el-input
                                    :disabled="Boolean(form.agencyId)"
                                    v-model="form.agencyUser"
                                    placeholder="请输入用户名"
                                />
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="14">
                            <el-form-item
                                label="密码"
                                prop="password"
                            style="margin-left:20px;">
                                <el-input
                                    :disabled="Boolean(form.agencyId)"
                                    v-model="form.password"
                                    type="password"
                                    autocomplete="new-password"
                                />
                            </el-form-item>    
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item
                                label="联系电话"
                                prop="telephone"
                            >
                                <el-input
                                    :disabled="Boolean(form.agencyId)"
                                    v-model="form.telephone"
                                    placeholder=""
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item
                                label="岗位"
                                prop="roleID"
                            style="margin-left:20px;">
                                <el-input
                                    v-model="form.roleID"
                                    placeholder=""
                                    v-show="false"
                                /><el-input
                                    value="机构管理员"
                                    :disabled="true"
                                />
                            </el-form-item>    
                        </el-col>
                    </el-row>
                </div>
                <el-form-item label="菜单权限" prop="permissions">
                    <el-checkbox
                        v-model="menuExpand"
                        @change="handleCheckedTreeExpand($event, 'menu')"
                    >展开/折叠</el-checkbox>
                    <el-checkbox
                        v-model="menuNodeAll"
                        @change="handleCheckedTreeNodeAll($event, 'menu')"
                    >全选/全不选</el-checkbox>
                    <el-checkbox
                        v-model="form.menuCheckStrictly"
                        @change="handleCheckedTreeConnect($event, 'menu')"
                    >联动选择</el-checkbox>
                    <el-tree
                        class="tree-border"
                        :data="menuOptions"
                        show-checkbox
                        ref="menu"
                        node-key="menuId"
                        :check-strictly="!form.menuCheckStrictly"
                        empty-text="加载中，请稍后"
                        :props="defaultProps"
                    ></el-tree>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        v-model="form.remark"
                        type="textarea"
                        placeholder="请输入内容"
                    ></el-input>
                </el-form-item>
            </el-form>

            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>    
</template>

<script>
import { listAgency, getAgencyMenu, delAgency, addAgency, updateAgency } from "@/api/system/agency";
import { encryptes } from '@/utils/jsencrypt'
export default {
    name: "Agency",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 角色表格数据
            AgencyList: [],
            // 显示搜索条件
            showSearch: true,
            loading: false,
            // 查询条件
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                agencyName: undefined
            },
            // 总条数
            total: 0,
            // 非多个禁用
            multiple: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            // 表单参数
            form: {
            },
            defaultProps: {
                children: "children",
                label: "menuName"
            },
            // 权限菜单列表
            menuOptions: this.$store.getters.menuOptions,
            // 表单校验
            rules: {
                agencyName: [
                    { required: true, message: "机构名称不能为空", trigger: "blur" }
                ],
                agencyUser: [
                    { required: true, message: "机构管理员名称不能为空", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" }
                ]
            },
            table_style:{background:'#DADDE9',color:'#000',height:'44px'}
        };

    },
    created() {
        this.getList();
    },
    methods: {
        // 类型选择
        typeFormat(row, column){
            return row.agencyType=='1'?"组织":"个体"
        },
        /** 查询角色列表 */
        getList() {
            this.loading = true;
            listAgency(this.queryParams).then(
                response => {
                    this.AgencyList = response.data.list;
                    this.total = response.data.total;
                    this.loading = false;
                }
            );
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item['agencyId'])
            this.multiple = !selection.length
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            
            this.queryParams ={
                pageNum: 1,
                pageSize: 10
            }
            this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            // console.log(row)v-hasPermi="[]"
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('system:agency:delete')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            let AgencyIds=undefined;
            if(row.agencyId==null){
                AgencyIds=this.ids
            }else{
                AgencyIds=[row.agencyId]
            }
            this.$confirm( `是否确认删除此 ${AgencyIds.length} 条机构数据项?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delAgency(AgencyIds);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch(() => { })
        },
        // 表单重置
        reset() {
            if (this.$refs.menu != undefined) {
                this.$refs.menu.setCheckedKeys([]);
            }
            this.menuExpand = false,
                this.menuNodeAll = false,
                this.deptExpand = true,
                this.deptNodeAll = false,
                this.form = {
                    agencyId: undefined, //机构id
                    agencyType:"1", //机构类型
                    agencyName:undefined, //机构名称
                    agencyAllName:undefined, //机构全称
                    agencyCode:undefined, //机构统一信用代码
                    description:undefined,//机构描述
                    maxUserNumber:undefined,
                    conuserNumber:undefined,
                    agencyUser:undefined,//机构管理员
                    password:undefined,//机构管理员密码
                    telephone:undefined,//联系电话
                    permissions: [],//权限列表
                    menuCheckStrictly: false,//权限菜单联动
                    remark:undefined
                };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('system:agency:add')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            this.open = true;
            this.title = "添加机构";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            // v-hasPermi="['system:agency:update']"
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('system:agency:update')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.reset();
            const AgencyId = row.agencyId || this.ids
            getAgencyMenu(AgencyId).then(response => {
                this.form = response.data ;
                this.form.password ="123456";
                let checkedKeys = response.data.permissions;
                this.open = true;
                checkedKeys.forEach((v) => {
                    this.$nextTick(() => {
                        this.$refs.menu.setChecked(v, true, false);
                    })
                })
                this.title = "修改机构信息";
            })
        },
        // 树权限（展开/折叠）
        handleCheckedTreeExpand(value, type) {
            if (type == 'menu') {
                let treeList = this.menuOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
                }
            } else if (type == 'dept') {
                let treeList = this.deptOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
                }
            }
        },
        // 树权限（全选/全不选）
        handleCheckedTreeNodeAll(value, type) {
            if (type == 'menu') {
                this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
            } else if (type == 'dept') {
                this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
            }
        },
        // 树权限（父子联动）
        handleCheckedTreeConnect(value, type) {
            if (type == 'menu') {
                this.form.menuCheckStrictly = value ? true: false;
            } else if (type == 'dept') {
                this.form.deptCheckStrictly = value ? true: false;
            }
        },
        created() {
            this.getList();
        },
        // 所有权限菜单节点数据
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getCheckedKeys();
            // 半选中的菜单节点
            let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys;
        },
        /** 提交按钮 */
        submitForm: function () {
            this.form.permissions = this.getMenuAllCheckedKeys();
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.agencyType=this.form.agencyType;
                    if (this.form.agencyId != undefined) {
                        updateAgency(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        this.form.password = encryptes(this.form.password)
                        addAgency(this.form).then(response => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                        this.form.password = ""
                    }
                }
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // //获取系统菜单配置权限
        // getMenuTree(){
        //     if(this.$store.getters.menuOptions.length==0){
        //         this.$store.dispatch("app/CreateMenuTree")
        //     }
              
        // }
    }
}
</script>
<style scoped>
.description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""; /*不用有内容也可以*/
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.delete {
    margin-top: 25px;
    margin-left: 1px;
}
.agencyInfo {
    padding:0px 40px;
}
.agencyUserInfo{
    padding:0px 40px;
}
.el-form-item{
    margin-bottom: 18px;
}
.addAgency{
    width: 800px;
}
</style>

